//通用样式
$activeColor:#540576;
$activeBgColor:linear-gradient(to right,#680DAE,#9529C6);
$textColor:#444;
$bgColor:#f5f5f5;
$border:#e9e9e9;
*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-family:PingFang-SC;
    -webkit-tap-highlight-color: transparent;
}
body{
    color: $textColor;
    font-size: 0.28rem;
    background-color: $bgColor;
}
a{
    text-decoration: none;
    color: $textColor;
}
input,select,button{
    outline: none;
    border: none;
    font-size: 0.28rem;
    
}
select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
}
select::-ms-expand { display: none; }
option::-ms-expand{
    display: none;
}
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
    outline: none;
    border: 0;
}

img{
    display: block;
}
video{
    display: block;
}

.space-around{
    display: flex;
    justify-content: space-around;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}
.space-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    //background-color: greenyellow;
}
.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.wrap{
    -webkit-flex-wrap: wrap;  
	-moz-flex-wrap: wrap;  
	-ms-flex-wrap: wrap;  
	-o-flex-wrap: wrap;  
	flex-wrap: wrap;  
}
// 垂直居中
.center{
    display: flex;
    display: -weblit-flex;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
// 水平居中
.center-row{
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    //justify-content: center;
    display: -weblit-flex;
    justify-content: center;
    // align-items: center;
}
// 竖行居中
.center-col{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
// 低对齐
.flex-end{
    display: flex;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.flex-column{
    display: flex;
    // display: -webkit-box;
    // display: -moz-box;
    // display: -ms-flexbox;
    // display: -weblit-flex;
    flex-flow: column;
    justify-content: space-between;
}
.padding-24{
    width: 100%;
    padding: 0 0.24rem;
    box-sizing: border-box;
}
.areatop{
    height: 1rem;
      .title{
        font-family:PingFang-SC-Heavy;
        //font-weight:800;
      }
      .more{
        margin-right: 0.20rem;
        font-family:PingFang-SC-Medium;
      }
    .more::after{
        content: "";
        width: 0.18rem;
        height: 0.18rem;
        border-right: 0.01rem solid #999;
        border-bottom: 0.01rem solid #999;
        border-top: none;
        border-left: none;
        position: absolute;
        right: 0.24rem;
        margin-top: 0.08rem;
        transform: rotate(-45deg)
    }
}
.open{
    width: 100%;
    height: 0.70rem;
    background-color: #fff;
    .open-center{
        position: relative;
        width: 1.60rem;
        height: 100%;
        p{
            font-size:0.28rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(153,153,153,1);
        }
    }
    .open-center::after{
        content: "";
        width: 0.18rem;
        height: 0.18rem;
        border-right: 0.01rem solid #999;
        border-bottom: 0.01rem solid #999;
        border-top: none;
        border-left: none;
        position: absolute;
        right: 0;
        transform: rotate(-45deg)
    }
    .packup{
        position: relative;
        width: 1rem;
        height: 100%;
        p{
            font-size:0.28rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(153,153,153,1);
        }
    }
    .packup::after{
        content: "";
        width: 0.18rem;
        height: 0.18rem;
        border-right: 0.01rem solid #999;
        border-bottom: 0.01rem solid #999;
        border-top: none;
        border-left: none;
        position: absolute;
        right: 0;
        margin-top: 0.05rem;
        transform: rotate(-135deg)
    }
}
.star{
    width: 1.20rem;
    height: 0.30rem;
    line-height: 0.3rem;
    // text-align: right;
    //background-color: yellowgreen;
    position: relative;
    .score{
     top: 0;
     font-size: 0.28rem;
     color: #0DB09B;
     position: absolute;
     width:100%;
     p{
        width: 100%;
        overflow: hidden;
     }
    }
    .empty_star{
     position: absolute;
     top: 0;
     width: 100%;
     /*background-color: red;*/
     color: #eee;
     font-size: 0.28rem;
    }
  }

.overFlow{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.overFlow-2{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}
.fs-38{
    font-size:0.38rem;
}
.fs-36{
    font-size:0.36rem;
}
.fs-34{
    font-size:0.34rem;
}
.fs-32{
    font-size:0.32rem;
}
.fs-28{
    font-size:0.28rem;
}
.fs-26{
    font-size: 0.26rem
}
.fs-24{
    font-size: 0.24rem;
}
.fs-22{
    font-size: 0.22rem;
}
.fs-20{
    font-size: 0.20rem;
}
.fs-18{
    font-size: 0.18rem;
}
.fs-16{
    font-size: 0.16rem;
}
.fs-14{
    font-size: 0.14rem;
}.fs-12{
    font-size: 0.12rem;
}.fs-30{
    font-size: 0.30rem;
}
.level-1{
    border: 0.03rem solid #FAD745;
}
.level-2{
    border: 0.03rem solid #ecd799;
}
.level-3{
    border: 0.03rem solid #d9d9d9;
}
.color-0{
    color: #000000
}
.color-3{
    color: #333;
}
.color-4{
    color: #444;
}
.color-active{
    color: $activeColor
}

.color-6{
    color: #666
}
.color-9{
    color: #999;
}
.color-f{
    color: #fff
}
.color-f5{
    color: $bgColor;
}
.color-r{
    color: #F44349
}
.bg-e{
    background-color: #eee
}
.bg-r{
    background:#F44349;
}
.bg-f{
    background-color: #fff;
}
.bg-d{
    background-color: #d6dee1;
}
.bg-active{
    background: $activeBgColor
}
.bg-p{
    background-color: $activeColor
}
.bg-f5{
    background-color: $bgColor;
}
.yuan{
    border-radius: 50%;
}
// 底部导航栏
.buttom-nav{
    width: 100%;
    height: 0.99rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 99;
    border-top: 0.01rem solid $border;
    ul{
        height: 100%;
        li{
            width: 25%;
            height: 100%;
            img{
                width: 0.47rem;
                height: 0.47rem;
            }
            p{
                font-size: 0.24rem;
            }
            a{
                width: 80%;
                height: 100%;
            }
        }
        .current{
            p{
                color: $activeColor;
            }
            
        }
    }
}
.common-btn{
    width: 100%;
    height: 1rem;
    background-color: $activeColor;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    border-radius: 0.15rem;
    font-size:0.32rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    letter-spacing: 0.2rem;

}
// 头部导航栏
.top-bar{
    width: 100%;
    height: 1rem;
    padding: 0 1.5rem;
    //font-weight:bold;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 99;
    font-size: 0.32rem;
    border-bottom: 0.01rem solid $bgColor;
    background-color: #fff;
    span{
        display: block;
        height: 100%;
        line-height: 1rem;
        position: relative;
        color: $textColor;
    }
    .current{
        font-weight: 500;
        color: $activeColor;
    }
    .current::after{
        content: "";
        width:0.4rem;
        height:0.08rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -0.2rem;
        background:$activeColor;
        border-radius:0.05rem;
    }
}

// 三角形
.triangle::after{
    content: "";
    width: 0;
    height: 0;
    border-right: 0.05rem solid $textColor;
    border-bottom: 0.05rem solid $textColor;
    border-top: 0.05rem solid transparent;
    border-left: 0.05rem solid transparent;
    // position: absolute;
    // right: 0;
    // bottom: 0;
}
// 教练皇冠
.teacherLevel{
    margin: 0 auto;
    width:1.30rem;
    height:1.30rem;
    border-radius:50%;
    position: relative;
    .headerLoge{
        width:0.50rem;
        height:0.50rem;
        display: block;
        position: absolute; 
        margin-left: -0.12rem;
        margin-top: -0.12rem;
       //transform: rotate(-5deg)

        img{
        transform: rotate(-10deg);
          width:0.50rem;
          height:0.50rem;
        }
    }
    img{
        width:1.30rem;
        height:1.30rem;
        border-radius:50%;
        object-fit: cover;
    }
}

// 右箭头
.arrow-right::after{
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    border-right: 0.01rem solid #999;
    border-bottom: 0.01rem solid #999;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg);
    //background-color: greenyellow
}
.arrowright::after{
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    border-right: 0.01rem solid #999;
    border-bottom: 0.01rem solid #999;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg)
}
// 上箭头
.arrow-up::after{
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    margin-top: 0.1rem;
    margin-left: 0.2rem;
    border-right: 0.01rem solid #999;
    border-bottom: 0.01rem solid #999;
    border-top: none;
    border-left: none;
    transform: rotate(-135deg)
}
// 下箭头
.arrow-down::after{
    content: "";
    width: 0.18rem;
    height: 0.18rem;
    margin-top: -0.1rem;
    margin-left: 0.2rem;
    border-right: 0.01rem solid #999;
    border-bottom: 0.01rem solid #999;
    border-top: none;
    border-left: none;
    transform: rotate(45deg)
}
// 底部按钮
.bottom-btn{
    width: 100%;
    height: 1rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 99;
    box-shadow:0rem 0rem 0.1rem 0rem rgba(172,172,172,0.23);
    padding: 0 0.24rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .center{
        width: 100%;
        height: 0.7rem;
        border-radius: 0.1rem;
        background-color: #0DB09B;
        color: #fff;
        font-size: 0.32rem
    }
}

// 弹出框
.logout{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .content{
        width: 5rem;
        height: 3rem;
        border-radius: 0.1rem;
        background-color: #fff;
        .center{
            width: 100%;
            height: 2rem;
            border-bottom: 0.01rem solid #e9e9e9;
        }
        .center-col{
            width: 100%;
            height: 0.98rem;
            div{
                width: 50%;
                height: 100%;
                border: none;
            }
            .cancel{
                border-right: 0.01rem solid #e9e9e9;
            }
            .sure{
                color: $activeColor;
            }
        }
    }
}
/*错误弹框*/
#mask_f {
	width: 100%;
	height: 100%;
	position: fixed!important;
	z-index: 9999999;
	top: 42%;
	left: 0;
	text-align: center;
}

#mask_f>span {
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	padding: 0.1rem 0.3rem;
	border-radius: 0.1rem;
	font-size: 0.24rem;
}
// 底部按钮
.bottombtn{
    width: 100%;
    height: 1rem;
    background-color: #fff;
    bottom: 0;
    box-shadow:0rem 0rem 0.1rem 0rem rgba(172,172,172,0.23);
    padding: 0 0.24rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .center{
        width: 100%;
        height: 0.7rem;
        border-radius: 0.1rem;
        background-color: #0DB09B;
        color: #fff;
        letter-spacing: 0.1rem;
        font-size: 0.32rem
    }
}

.bottombtn{
    .space-between{
        width: 100%;
        height: 0.7rem;
        div{
            width: 3.4rem;
            font-size: 0.32rem;
            text-align: center;
            line-height: 0.7rem;
            letter-spacing: 0.1rem;
            border-radius: 0.15rem;
        }
        div:nth-child(1){
            background-color: #eee;
            color: $textColor
        }
        div:nth-child(2){
            background-color: $activeColor;
            color: #fff;
        }
    }
}

// 头部样式设置
.header{
    padding: 0 0.24rem;
    width: 100%;
    height: 1rem;
    position: fixed;
    left: 0;
    top: 0;
//  background: $activeBgColor;
    z-index: 999;
    .center{
        font-size: 0.36rem;
        color: #fff;
        font-weight: 800;
    }
}
// mint-UI样式覆盖
.mint-msgbox{
  width: 5.2rem;
  height: 2.2rem;
  .mint-msgbox-content{
    .mint-msgbox-message{
      font-size: 0.32rem;
      margin-top: 0.41rem;
      font-weight:500;
      color:rgba(68,68,68,1);
      line-height:0.36rem;
    }
  }
  .mint-msgbox-btns{
    .mint-msgbox-confirm,
    .mint-msgbox-cancel{
      font-size: 0.32rem;
      font-weight:500;
      color:rgba(68,68,68,1);
    }
  }
}